<template>
  <el-drawer v-model="drawerVisible" title="布局设置" size="290px">
    <!-- 布局样式 -->
    <el-divider class="divider" content-position="center">
      <el-icon><Notification /></el-icon>
      布局样式
    </el-divider>
    <div class="layout-box">
      <el-tooltip effect="dark" content="纵向" placement="top" :show-after="200">
        <div :class="['layout-item layout-vertical', { 'is-active': layout == 'vertical' }]" @click="setLayout('vertical')">
          <div class="layout-dark"></div>
          <div class="layout-container">
            <div class="layout-light"></div>
            <div class="layout-content"></div>
          </div>
          <el-icon v-if="layout == 'vertical'"><CircleCheckFilled /></el-icon>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="经典" placement="top" :show-after="200">
        <div :class="['layout-item layout-classic', { 'is-active': layout == 'classic' }]" @click="setLayout('classic')">
          <div class="layout-dark"></div>
          <div class="layout-container">
            <div class="layout-light"></div>
            <div class="layout-content"></div>
          </div>
          <el-icon v-if="layout == 'classic'"><CircleCheckFilled /></el-icon>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="横向" placement="top" :show-after="200">
        <div :class="['layout-item layout-transverse', { 'is-active': layout == 'transverse' }]" @click="setLayout('transverse')">
          <div class="layout-dark"></div>
          <div class="layout-content"></div>
          <el-icon v-if="layout == 'transverse'"><CircleCheckFilled /></el-icon>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="分栏" placement="top" :show-after="200">
        <div :class="['layout-item layout-columns', { 'is-active': layout == 'columns' }]" @click="setLayout('columns')">
          <div class="layout-dark"></div>
          <div class="layout-light"></div>
          <div class="layout-content"></div>
          <el-icon v-if="layout == 'columns'"><CircleCheckFilled /></el-icon>
        </div>
      </el-tooltip>
    </div>
    <div class="theme-item">
      <span>
        侧边栏反转色
        <el-tooltip effect="dark" content="侧边栏颜色变为深色模式" placement="top">
          <el-icon><QuestionFilled /></el-icon>
        </el-tooltip>
      </span>
      <el-switch v-model="asideInverted" @change="setAsideTheme" />
    </div>
    <div class="theme-item mb50">
      <span>
        头部反转色
        <el-tooltip effect="dark" content="头部颜色变为深色模式" placement="top">
          <el-icon><QuestionFilled /></el-icon>
        </el-tooltip>
      </span>
      <el-switch v-model="headerInverted" @change="setHeaderTheme" />
    </div>
    <!-- 全局主题 -->
    <el-divider class="divider" content-position="center">
      <el-icon><ColdDrink /></el-icon>
      全局主题
    </el-divider>
    <div class="theme-item">
      <span>主题颜色</span>
      <el-color-picker v-model="primary" :predefine="colorList" @change="changePrimary" />
    </div>
    <div class="theme-item">
      <span>暗黑模式</span>
      <SwitchDark />
    </div>
    <div class="theme-item">
      <span>灰色模式</span>
      <el-switch v-model="isGrey" @change="changeGreyOrWeak('grey', !!$event)" />
    </div>
    <div class="theme-item mb40">
      <span>色弱模式</span>
      <el-switch v-model="isWeak" @change="changeGreyOrWeak('weak', !!$event)" />
    </div>
    <!-- 界面设置 -->
    <el-divider class="divider" content-position="center">
      <el-icon><Setting /></el-icon>
      界面设置
    </el-divider>
    <div class="theme-item">
      <span>折叠菜单</span>
      <el-switch v-model="isCollapse" />
    </div>
    <div class="theme-item">
      <span>面包屑</span>
      <el-switch v-model="breadcrumb" />
    </div>
    <div class="theme-item">
      <span>面包屑图标</span>
      <el-switch v-model="breadcrumbIcon" />
    </div>
    <div class="theme-item">
      <span>标签栏</span>
      <el-switch v-model="tabs" />
    </div>
    <div class="theme-item">
      <span>标签栏图标</span>
      <el-switch v-model="tabsIcon" />
    </div>
    <div class="theme-item">
      <span>页脚</span>
      <el-switch v-model="footer" />
    </div>
    <div class="theme-item">
      <span>连续提交</span>
      <el-switch v-model="continuousSubmission" />
    </div>
    <div class="theme-item">
      <span>全宗路由</span>
      <el-switch v-model="fondsRouter" />
    </div>
    <div class="theme-item">
      <span>显示子级</span>
      <el-switch v-model="showChild" />
    </div>
    <div class="theme-item">
      <span>是否显示超时</span>
      <el-switch v-model="showOvertime" />
    </div>
    <div class="theme-item" v-if="showOvertime">
      <span style="width: 100px">超时时间</span>
      <el-input v-model="overtime" placeholder="单位:分钟" />
    </div>
    <div class="theme-item">
      <span style="width: 100px">页面间隔</span>
      <el-input v-model="pageSpace" @input="updatePageSpace" placeholder="单位:px" />
    </div>
    <div class="theme-item">
      <span style="width: 100px">加载条数</span>
      <el-input v-model="pageSize" />
    </div>
    <div class="theme-item">
      <span style="width: 100px">粘贴并发数</span>
      <el-input-number v-model="pasteConcurrency" :min="1" :max="10" :step="1" size="small" controls-position="right" />
    </div>
    <!-- 滚动条设置 -->
    <el-divider class="divider" content-position="center">
      <el-icon><Pointer /></el-icon>
      滚动条设置
    </el-divider>
    <div class="theme-item">
      <span style="width: 100px">滚动条宽度</span>
      <el-input-number
        v-model="scrollbarWidth"
        :min="4"
        :max="20"
        :step="1"
        size="small"
        controls-position="right"
        @change="updateScrollbarWidth"
      />
    </div>
    <div class="theme-item">
      <span style="width: 100px">滚动条高度</span>
      <el-input-number
        v-model="scrollbarHeight"
        :min="4"
        :max="20"
        :step="1"
        size="small"
        controls-position="right"
        @change="updateScrollbarHeight"
      />
    </div>
    <div class="theme-item">
      <el-button plain style="width: 100%" @click="saveSetting('')">提交</el-button>
    </div>
    <!-- 快捷键 -->
    <el-divider class="divider shortcutKey" content-position="center">
      <el-icon><LocationInformation /></el-icon>
      快捷键
    </el-divider>
    <div class="theme-item">
      <span style="width: 100px">首页</span>
      <el-input v-model="indexKey" />
    </div>
    <div class="theme-item">
      <span style="width: 100px">末尾页</span>
      <el-input v-model="lastKey" />
    </div>
    <div class="theme-item">
      <span style="width: 100px">上一件</span>
      <el-input v-model="prevKey" />
    </div>
    <div class="theme-item">
      <span style="width: 100px">下一件</span>
      <el-input v-model="nextKey" />
    </div>
    <div class="theme-item">
      <el-button plain style="width: 100%" @click="saveSetting('')">提交</el-button>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { storeToRefs } from "pinia";
import { useRoute } from "vue-router";
import { useTheme } from "@/hooks/useTheme";
import { useScrollbar } from "@/hooks/useScrollbar";
import { useGlobalStore } from "@/stores/modules/global";
import { useUserStore } from "@/stores/modules/user";
import { LayoutType } from "@/stores/interface";
import { DEFAULT_PRIMARY } from "@/config";
import mittBus from "@/utils/mittBus";
import SwitchDark from "@/components/SwitchDark/index.vue";
import useCurrentInstance from "@/utils/useCurrentInstance";

const { proxy } = useCurrentInstance();
const userStore = useUserStore();
const route = useRoute();
const { changePrimary, changeGreyOrWeak, setAsideTheme, setHeaderTheme } = useTheme();
const { scrollbarConfig, setScrollbarConfig, resetScrollbarConfig } = useScrollbar();
const globalStore = useGlobalStore();
const {
  layout,
  primary,
  isGrey,
  isWeak,
  asideInverted,
  headerInverted,
  isCollapse,
  breadcrumb,
  breadcrumbIcon,
  tabs,
  tabsIcon,
  footer,
  continuousSubmission,
  fondsRouter,
  showChild,
  showOvertime,
  overtime,
  pageSize,
  pageSpace,
  indexKey,
  lastKey,
  prevKey,
  nextKey,
  splitpanesPos,
  pasteConcurrency
} = storeToRefs(globalStore);
// 预定义主题颜色
const colorList = [
  DEFAULT_PRIMARY,
  "#daa96e",
  "#0c819f",
  "#409eff",
  "#27ae60",
  "#ff5c93",
  "#e74c3c",
  "#fd726d",
  "#f39c12",
  "#9b59b6"
];

// 设置布局方式
const setLayout = (val: LayoutType) => {
  globalStore.setGlobalState("layout", val);
  setAsideTheme();
};

// 滚动条设置
const scrollbarWidth = computed({
  get: () => scrollbarConfig.value.width,
  set: val => setScrollbarConfig({ width: val })
});

const scrollbarHeight = computed({
  get: () => scrollbarConfig.value.height,
  set: val => setScrollbarConfig({ height: val })
});

const updateScrollbarWidth = (val: number) => {
  setScrollbarConfig({ width: val });
};

const updateScrollbarHeight = (val: number) => {
  setScrollbarConfig({ height: val });
};

const updatePageSpace = (val: string) => {
  const numVal = parseInt(val);
  if (!isNaN(numVal) && numVal >= 0) {
    document.documentElement.style.setProperty("--default-padding", `${numVal}px`);
  }
};

// 打开主题设置
const drawerVisible = ref(false);
const splitpanesParams = ref<any>({});
mittBus.on("openThemeDrawer", () => (drawerVisible.value = true));

// 接收Splite保存消息
const timer = ref<any>(null);
mittBus.on("splitpanesPosition", (val: any) => {
  timer.value && clearTimeout(timer.value);
  timer.value = setTimeout(() => {
    const status = route.query.status;
    const fmtid = route.query.fmtid;
    if (val?.p == "left") {
      splitpanesParams.value[`left_${status}_${fmtid}`] = val.v;
    } else {
      splitpanesParams.value[`middle_${status}_${fmtid}`] = val.v;
    }
    globalStore.setGlobalState("splitpanesPos", {
      ...splitpanesParams.value
    });
    saveSetting("splitpanesPos");
  }, 500);
});

// 保存系统设置
const saveSetting = (type: string) => {
  const U_ID = userStore.userInfo.U_ID;
  const setting = {
    layout: layout.value,
    primary: primary.value,
    isGrey: isGrey.value,
    isWeak: isWeak.value,
    asideInverted: asideInverted.value,
    headerInverted: headerInverted.value,
    isCollapsibleMenu: isCollapse.value,
    isCrumbs: breadcrumb.value,
    isBreadcrumbIcon: breadcrumbIcon.value,
    isTabBar: tabs.value,
    isTabBarIcon: tabsIcon.value,
    isFooter: footer.value,
    isContinuousEmission: continuousSubmission.value,
    isFullRoute: fondsRouter.value,
    isDisplayChild: showChild.value,
    pageSpacing: pageSpace.value,
    loadNum: pageSize.value,
    showOvertime: showOvertime.value,
    overtime: overtime.value,
    indexKey: indexKey.value,
    lastKey: lastKey.value,
    prevKey: prevKey.value,
    nextKey: nextKey.value,
    scrollbarConfig: scrollbarConfig.value,
    splitpanesPos: splitpanesPos.value,
    pasteConcurrency: pasteConcurrency.value
  };
  const parmas = {
    u_ID: U_ID,
    interfaceSettings: JSON.stringify(setting)
  };
  // 保存配置
  proxy.$vueAxios.post("MasterBaseUsers/UpdateInterfaceSettings", parmas, { noLoading: type ? true : false }).then((res: any) => {
    if (type) return; // 如果是Splite存储则不需要进行保存提示
    proxy.$message.success("保存成功");
  });
};

onMounted(() => {
  document.documentElement.style.setProperty("--default-padding", `${pageSpace.value}px`);
});
</script>

<style scoped lang="scss">
@import "./index.scss";
.shortcutKey {
  margin: 40px 0;
}
:deep(.el-divider__text) {
  padding: 10px !important;
}
.divider {
  margin-top: 20px;
}
</style>
